<template>
  <div class="my-header" :class="{ my_fixed: fixed }">
    <div class="left-box">
      <div v-if="showLeft" class="left" @click="goBackTo">
        <div class="back-btn" v-if="showImg"></div>
        <span class="close-btn" v-if="showTxt">{{ leftText }}</span>
      </div>
    </div>
    <span class="title">{{ titleValue }}</span>
    <div class="right-text" @click="clickRightBtn">
      <img class="picture" :src="rightIcon" alt="" v-if="rightIcon" />
      <span v-if="rightText">{{ rightText }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({})
export default class Header extends Vue {
  @Prop() private titleValue!: string; //头部中间名称
  @Prop({ default: true }) public fixed?: boolean; //是否固定在屏幕顶部
  @Prop({ default: '' }) public leftText?: string; //左侧文字
  @Prop({ default: '' }) public rightText?: string; //右侧文字
  @Prop({ default: '' }) public rightIcon?: string; //右侧图片
  @Prop({ default: true }) public showLeft?: boolean; //是否显示
  @Prop({ default: true }) public showImg?: boolean; //是否显示左侧图片
  @Prop({ default: false }) public showTxt?: boolean; //是否显示左侧文字
  @Prop() public clickLeft?: () => void; //点击左侧文字
  @Prop() public clickRight?: () => void; //点击右侧按钮

  public goBackTo() {
    if (typeof this.clickLeft === 'function') {
      this.clickLeft();
    } else {
      this.$router.back();
    }
  }

  clickRightBtn() {
    if (typeof this.clickRight === 'function') {
      this.clickRight();
    }
  }
}
</script>

<style scoped lang="less">
.my-header {
  width: 100%;
  height: 40px;
  display: flex;
  background: #009B63;
  justify-content: space-between;
  line-height: 40px;
  padding: 0 15px;
  top: 0;
  color: #fff;
  border-bottom: 0.1px solid #eaeaea;
}
.left-box {
  width: 18%;
  .left {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
}
.my-header > .right-text {
  width: 20%;
  font-size: 16px;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .picture {
    width: 20px;
    height: 20px;
  }
}
.my-header .back-btn {
  width: 14px;
  height: 14px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: rotate(-45deg);
  margin-top: 15px;
}
.my-header .close-btn {
  flex: 1;
  color: #fff;
  font-size: 16px;
}
.my-header .title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #fff;
  // font-weight: bold;
  overflow: hidden;
}

.my_fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
</style>
